<template>
    <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tree-select
      v-model:active-id="rightCategoryValue"
      v-model:main-active-index="firstCategoryvalue"
      :items="categoryDate"
      style="height: 100%;"
    >
    <template #content>
        <van-grid :column-num="3" icon-size="50px" :border="false">
      <van-grid-item v-for="item in categoryDate[firstCategoryvalue]?.children" 
        :key="item.id" 
        :icon="item.img" 
        :text="item.text" 
        :to="{name:'moveProductList',query:{categoryId:item.id}}"/>
        </van-grid>


    </template>


    </van-tree-select>


</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { categoryApi } from '@/api';
//右侧选中项的 id，
const rightCategoryValue = ref(1)
//左侧选中项的索引
const firstCategoryvalue = ref(0)

const categoryDate = ref([
     {
        text: '浙江',
        children: [
            { text: '杭州', id: 1 ,img:'https://m.360buyimg.com/babel/jfs/t1/215072/20/30644/9019/646da7a1F63613a8c/a5b2428860e14917.jpg'},
            { text: '温州', id: 2 ,img:'https://m.360buyimg.com/babel/jfs/t1/114477/21/36707/8373/646da8d6Facec2806/fd8d1f9c0bb1bc5a.jpg'},
            { text: '宁波', id: 3, disabled: true },
        ],
    },
])
const categoryDate2 = ref([
    { id: 1, name: '手机互联', img: '', parentId: 0 },
    { id: 2, name: '手机数码', img: '', parentId: 1 },
    { id: 3, name: '家用电器', img: '', parentId: 0 },
    { id: 4, name: '家用电饭煲', img: '', parentId: 3 },
])

onMounted(() => { 

    callCategoryApi()
    // categoryDate2.value.forEach((item: any) => { 
    //     item.text = item.name
    // })
    // console.log(categoryDate2);
    //   const categoryDate3 = categoryDate2.value.reduce((hezi: any, currentvalue: any) => {
    //     //console.log(currentvalue);

    //     currentvalue.children = categoryDate2.value.filter((item: any) => {
    //         return item.parentId === currentvalue.id
    //     })
    //     if (currentvalue.parentId === 0) {
    //         hezi.push(currentvalue)
    //     }
    //     return hezi;
    // }, [])

    // //console.log(categoryDate2);
    // categoryDate.value = categoryDate3
    // console.log(categoryDate.value);
    
})

const callCategoryApi = () => { 
    categoryApi.select.call().then((res:any) => { 
       res.forEach((item: any) => {
            item.text = item.name
        })

        const categoryDate3 = res.reduce((hezi: any, currentvalue: any) => {
            //console.log(currentvalue);

            currentvalue.children = res.filter((item: any) => {
                return item.parentId === currentvalue.id
            })
            if (currentvalue.parentId === 0) {
                hezi.push(currentvalue)
            }
            return hezi;
        }, [])

        //console.log(categoryDate2);
        categoryDate.value = categoryDate3
        console.log(categoryDate.value);

    })
}



const onClickLeft = () => history.back();
</script>
<style>

</style>